<!--
 * @Description: 问卷编辑
 * @Author: liyujie
 * @Date: 2021/10/27
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/10/27
-->
<template>
    <section class="questionnaire-edit-wrapper">
        <!--题型控件-->
        <div class="question-type-wrapper">
            <div class="block-title">
                题型控件
            </div>
            <div class="group-wrapper">
                <div
                    v-for="group in typeList"
                    :key="group.id"
                    class="type-group"
                >
                    <div class="group-title">
                        {{ group.title }}
                    </div>
                    <div class="type-list">
                        <div
                            v-for="item in group.types"
                            :key="item.id"
                            class="type-item"
                            @click="addQuestionItem(item)"
                        >
                            <div class="icon left-icon">
                                <i
                                    class="iconfont"
                                    :class="item.icon"
                                />
                            </div>
                            <div class="type-item-title">
                                {{ item.title }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="question-content-wrapper">
            <div class="question-content__title">
                {{ title }}
            </div>
            <template v-if="submit_config.length">
                <draggable
                    class="question-list"
                    tag="div"
                    handle=".sort-button"
                    filter=".no-drag"
                    v-model="submit_config"
                    v-bind="dragOptions"
                    :move="onDragMove"
                    @start="drag = true"
                    @end="drag = false"
                >
                    <div
                        v-for="(item, index) in submit_config"
                        :key="item.id"
                        class="question-item"
                        :class="{'is-active': item.isActive, 'is-hover': item.isHover, 'no-drag': item.type === 12 && index === 0}"
                        @mouseover="item.isHover = true"
                        @mouseout="item.isHover = false"
                        @click="handleClickQuestion(item, index)"
                    >
                        <div class="question-item__content">
                            <!--标题-->
                            <div
                                class="item__title"
                                v-if="item.type !== 12"
                            >
                                <div class="index-num">{{ calcIndex(index) }}</div>
                                <zd-div-edit
                                    v-model="item.title"
                                    size="medium"
                                    :placeholder="item.type | typeTitleFilter"
                                    style="max-width: 545px"
                                />
                            </div>
                            <!--标题题干说明-->
                            <div
                                class="item__title-desc"
                                v-if="item.has_intro"
                            >
                                <zd-div-edit
                                    v-model="item.intro"
                                    size="medium"
                                    placeholder="请输入题干说明"
                                    style="max-width: 545px"
                                />
                            </div>
                            <!--单选/多选组件-->
                            <template v-if="item.type === 2 || item.type === 3">
                                <!--选项列表-->
                                <draggable
                                    class="question-item__option-list"
                                    tag="div"
                                    v-bind="dragOptions"
                                    :group="{ name: `option-list-${index}`}"
                                    handle=".sort-btn"
                                    v-model="item.options"
                                    @start="drag = true"
                                    @end="drag = false"
                                >
                                    <div
                                        v-for="(option, i) in item.options"
                                        :key="i"
                                        class="option-item"
                                        @mouseover="option.isHover = true"
                                        @mouseout="option.isHover = false"
                                        @click.stop="handleClickOption(item, option, index, i, 'question')"
                                    >
                                        <div class="item__title option">
                                            <div class="sort-btn">
                                                <i
                                                    v-if="option.isActive || option.isHover"
                                                    class="iconfont el-icon-hand-yidong1"/>
                                            </div>
                                            <zd-div-edit
                                                v-model="option.title"
                                                size="small"
                                                placeholder="请输入选项名称"
                                                class="radio-input"
                                                :class="{'is-active': option.isActive, 'is-hover': option.isHover, 'other': option.option_type === 2}"
                                                style="max-width: 545px"
                                            />
                                            <div
                                                class="radio-checkbox-icon"
                                                :class="{'radio': item.type === 2}"
                                            />
                                            <div class="setting-option">
                                                <template v-if="option.isActive || option.isHover">
                                                    <div
                                                        class="setting-btn"
                                                        @click.stop="handleClickOption(item, option, index, i, 'option')"
                                                    >
                                                        <i class="iconfont el-icon-hand-shezhi1"/>
                                                    </div>
                                                    <div
                                                        class="setting-btn"
                                                        @click.stop="handleDeleteOption(item, option, i)"
                                                    >
                                                        <i class="iconfont el-icon-hand-shanjian"/>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                        <div
                                            class="item__title-desc option"
                                            v-if="option.has_intro"
                                            @click.stop="handleClickOption(item, option, index, i, 'option')"
                                        >
                                            <zd-div-edit
                                                v-model="option.intro"
                                                size="small"
                                                placeholder="请输入选项说明"
                                                style="max-width: 533px"
                                            />
                                        </div>
                                    </div>
                                </draggable>
                                <!--添加按钮-->
                                <div class="add-btn">
                                    <el-button
                                        size="medium"
                                        type="text"
                                        icon="el-icon-plus"
                                        @click="addOption(item, 1)"
                                    >
                                        添加单独选项
                                    </el-button>
                                    <el-button
                                        size="medium"
                                        type="text"
                                        style="margin-left: 24px"
                                        icon="el-icon-plus"
                                        @click="addOption(item, 2)"
                                    >
                                        添加其他选项
                                    </el-button>
                                </div>
                            </template>
                            <!--单项填空组件-->
                            <template v-if="item.type === 1">
                                <div class="simple-input">
                                    <el-input
                                        size="medium"
                                        :placeholder="item.hint"
                                        style="max-width: 533px"
                                    />
                                </div>
                            </template>
                            <!--多项填空组件-->
                            <template v-if="item.type === 11">
                                <draggable
                                    class="question-item__option-list"
                                    tag="div"
                                    v-bind="dragOptions"
                                    :group="{ name: `option-list-${index}`}"
                                    handle=".sort-btn"
                                    v-model="item.options"
                                    @start="drag = true"
                                    @end="drag = false"
                                >
                                    <div
                                        v-for="(option, i) in item.options"
                                        :key="i"
                                        class="option-item"
                                        @mouseover="option.isHover = true"
                                        @mouseout="option.isHover = false"
                                        @click.stop="handleClickOption(item, option, index, i, 'question')"
                                    >
                                        <div class="item__title multiple">
                                            <div class="sort-btn">
                                                <i
                                                    v-if="option.isActive || option.isHover"
                                                    class="iconfont el-icon-hand-yidong1
                                            "/>
                                            </div>
                                            <zd-div-edit
                                                v-model="option.title"
                                                size="small"
                                                placeholder="请输入选项名称"
                                                :class="{'is-active': option.isActive, 'is-hover': option.isHover, 'other': option.option_type === 2}"
                                                style="max-width: 545px"
                                            />
                                            <div class="setting-option">
                                                <template v-if="option.isActive || option.isHover">
                                                    <div
                                                        class="setting-btn"
                                                        @click.stop="handleClickOption(item, option, index, i, 'option')"
                                                    >
                                                        <i class="iconfont el-icon-hand-shezhi1"/>
                                                    </div>
                                                    <div
                                                        class="setting-btn"
                                                        @click.stop="handleDeleteOption(item, option, i)"
                                                    >
                                                        <i class="iconfont el-icon-hand-shanjian"/>
                                                    </div>
                                                </template>
                                            </div>
                                        </div>
                                        <div
                                            class="item__title-desc multiple"
                                            @click.stop="handleClickOption(item, option, index, i, 'question')"
                                        >
                                            <el-input
                                                size="medium"
                                                :placeholder="option.edit_content_hint"
                                                style="max-width: 533px"
                                                disabled
                                            />
                                        </div>
                                    </div>
                                </draggable>
                                <!--添加按钮-->
                                <div class="add-btn">
                                    <el-button
                                        size="medium"
                                        type="text"
                                        icon="el-icon-plus"
                                        @click="addSimpleInput(item, 2)"
                                    >
                                        添加单个填空项
                                    </el-button>
                                </div>
                            </template>
                            <!--图片上传组件-->
                            <template v-if="item.type === 5">
                                <div class="image-upload">
                                    <div class="select-image">
                                        <i class="el-icon-plus"/>
                                        <div>上传图片</div>
                                    </div>
                                </div>
                            </template>
                            <!--图片选择组件-->
                            <template v-if="item.type === 10 || item.type === 13">
                                <draggable
                                    class="image-select__option-list"
                                    tag="div"
                                    v-bind="dragOptions"
                                    :group="{ name: `option-list-${index}`}"
                                    handle=".sort-view"
                                    v-model="item.options"
                                    :move="onDragImageMove"
                                    @start="drag = true"
                                    @end="drag = false"
                                >
                                    <div
                                        class="image-select-item"
                                        v-for="(option, i) in item.options"
                                        :key="i"
                                        @mouseover="option.isHover = true"
                                        @mouseout="option.isHover = false"
                                    >
                                        <div class="item-image sort-view">
                                            <img
                                                :src="option.image_url"
                                                alt="">
                                        </div>
                                        <div class="input-view">
                                            <zd-div-edit v-model="option.title"/>
                                            <div
                                                class="radio-circle"
                                                :class="{'checkbox': item.type === 10}"
                                            />
                                        </div>
                                        <div
                                            class="desc-view"
                                            v-if="!option.intro"
                                            @click.stop="setOptionDesc(option)"
                                        >
                                            选项说明（选填）
                                        </div>
                                        <div
                                            class="desc-view"
                                            v-else
                                            @click.stop="setOptionDesc(option)"
                                        >
                                            {{ option.intro }}
                                        </div>
                                        <div
                                            class="option-btn"
                                            v-if="option.isHover"
                                        >
                                            <el-upload
                                                class="image-uploader-button"
                                                action="noAction"
                                                :show-file-list="false"
                                                :http-request="(e) => handleUploadImage(e, item, 'edit', i)"
                                                :before-upload="beforeUploadImage"
                                                accept="image/*"
                                                :ref="`uploaderEdit${index}`"
                                            >
                                                <div class="option-btn-item">
                                                    编辑
                                                </div>
                                            </el-upload>
                                            <div
                                                class="option-btn-item"
                                                @click="handleDeleteImageOption(item, i, index)"
                                            >
                                                删除
                                            </div>
                                        </div>
                                    </div>
                                    <el-upload
                                        class="image-uploader"
                                        action="noAction"
                                        :show-file-list="false"
                                        :http-request="(e) => handleUploadImage(e, item)"
                                        :before-upload="beforeUploadImage"
                                        accept="image/*"
                                        :limit="10"
                                        multiple
                                        :ref="`uploader${index}`"
                                        v-if="item.options.length < 10"
                                    >
                                        <div class="upload-icon">
                                            <i class="el-icon-plus"/>
                                        </div>
                                        <div class="upload-tips">
                                            <div style="margin-bottom: 6px">上传图片</div>
                                            <div>最多可上传10张</div>
                                        </div>
                                    </el-upload>
                                </draggable>
                            </template>
                            <!--分页器组件-->
                            <template v-if="item.type === 12">
                                <div class="pagination-wrapper">
                                    <div class="page-icon">
                                        <i class="iconfont el-icon-hand-fanye"/>
                                    </div>
                                    <div class="page-num">
                                        第{{ calcPageIndex(index) }}页 / 共{{ submit_config.filter(page => page.type === 12).length }}页
                                    </div>
                                    <div
                                        class="page-time"
                                        v-if="item.pagination_stay_time !== -1"
                                    >
                                        <span>最短时间<span style="color: #20A0FF">{{ `${item.pagination_stay_time}秒` }}</span></span>
                                    </div>
                                    <div class="arrow">
                                        <i class="el-icon-arrow-left"/>
                                    </div>
                                </div>
                            </template>
                        </div>
                        <div
                            class="option-view"
                            :class="{'page': item.type === 12}"
                            v-if="!(item.type === 12 && index === 0)"
                        >
                            <template v-if="item.isActive || item.isHover">
                                <div class="option-button sort-button">
                                    <i class="iconfont el-icon-hand-tuozhuai2"/>
                                </div>
                                <div
                                    class="option-button"
                                    v-if="item.type !== 12"
                                    @click.stop="handleCopy(item)"
                                >
                                    <i class="iconfont el-icon-hand-fuzhi1"/>
                                </div>
                                <div
                                    class="option-button"
                                    @click.stop="handleDelete(item, index)"
                                >
                                    <i class="iconfont el-icon-hand-shanchu2"/>
                                </div>
                            </template>
                        </div>
                    </div>
                </draggable>
            </template>
            <template v-else>
                <div class="question-content__empty">
                    <img
                        src="https://cdn.zsdx.cn/phaadmin/question-empty.png"
                        alt=""
                        class="empty-img"
                    >
                    <div class="empty-desc">
                        请点击添加左侧题型控件面板，添加对应的题型进行创建问卷哦～
                    </div>
                </div>
            </template>
            <div class="question-content__footer">
                <el-button
                    size="medium"
                    style="width: 120px;"
                    @click="$emit('prev')"
                >
                    上一步
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    style="width: 120px;margin-left: 24px"
                    @click="$emit('submit', 1)"
                >
                    保存并上架
                </el-button>
                <el-button
                    size="medium"
                    class="save-button"
                    style="width: 120px;margin-left: 24px"
                    @click="$emit('submit', 0)"
                >
                    保存
                </el-button>
            </div>
        </div>
        <div class="question-setting-wrapper">
            <transition name="fade">
                <div
                    class="setting-content-wrapper"
                    v-if="activeData"
                >
                    <!--题目属性设置区域-->
                    <template v-if="configType === 'question'">
                        <div
                            class="title-view"
                            v-if="activeData.type !== 12"
                        >
                            <div class="title">{{ activeData.type | typeNameFilter }}</div>
                            <div class="sub-title">Q{{ calcIndex(activeIndex) }}{{ activeData.type | typeNameFilter }}</div>
                        </div>
                        <div
                            class="title-view page"
                            v-if="activeData.type === 12"
                        >
                            <div class="left">
                                <div class="title">{{ activeData.type | typeNameFilter }}</div>
                                <div
                                    class="sub-title"
                                >页码{{ calcPageIndex(activeIndex) }}/{{ submit_config.filter(page => page.type === 12).length }}</div>
                            </div>
                            <div
                                class="apply-btn"
                                @click="applyPageTime(activeData)"
                            >
                                应用于全部
                            </div>
                        </div>
                        <div class="setting-list">
                            <template v-if="activeData.type !== 12">
                                <div class="setting-item">
                                    <div class="setting-label">题干说明</div>
                                    <div class="setting-content">
                                        <el-switch
                                            v-model="activeData.has_intro"
                                            :active-value="1"
                                            :inactive-value="0"
                                            @change="setEmptyDesc($event, activeData)"
                                        />
                                    </div>
                                </div>
                                <div
                                    class="setting-item"
                                    style="background: #F8F9FA"
                                    v-if="activeData.has_intro"
                                >
                                    <div class="setting-label">内容较长时折叠展示</div>
                                    <div class="setting-content">
                                        <el-switch
                                            v-model="activeData.classes.overflow_fold"
                                            :active-value="1"
                                            :inactive-value="0"
                                        />
                                    </div>
                                </div>
                            </template>
                            <!--多选题额外配置-->
                            <template v-if="activeData.type === 3">
                                <div class="setting-item column">
                                    <div class="setting-item-title">可选范围</div>
                                    <div class="setting-item-content">
                                        <div class="setting-item-content__item">
                                            <div class="label">最少</div>
                                            <div class="value">
                                                <el-select
                                                    v-model="activeData.value_length_min"
                                                    size="small"
                                                >
                                                    <el-option
                                                        label="不限"
                                                        :value="-1"
                                                    />
                                                    <el-option
                                                        v-for="(item, index) in activeData.options"
                                                        :key="index"
                                                        :label="`${index + 1}项`"
                                                        :value="index + 1"
                                                    />
                                                </el-select>
                                            </div>
                                        </div>
                                        <div class="setting-item-content__item">
                                            <div class="label">最多</div>
                                            <div class="value">
                                                <el-select
                                                    v-model="activeData.value_length_max"
                                                    size="small"
                                                >
                                                    <el-option
                                                        label="不限"
                                                        :value="-1"
                                                    />
                                                    <el-option
                                                        v-for="(item, index) in activeData.options"
                                                        :key="index"
                                                        :label="`${index + 1}项`"
                                                        :value="index + 1"
                                                    />
                                                </el-select>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </template>
                            <!--单项填空额外配置-->
                            <template v-if="activeData.type === 1">
                                <div class="setting-item column">
                                    <div class="setting-item-title">填写限制</div>
                                    <div class="setting-item-content">
                                        <div class="setting-item-content__item">
                                            <div class="label">格式限制</div>
                                            <div class="value">
                                                <el-select
                                                    v-model="activeData.value_validation_rule"
                                                    size="small"
                                                    style="width: 128px"
                                                    @change="setEmptyValidate($event, activeData, 'value_validation_type')"
                                                >
                                                    <el-option
                                                        v-for="item in validateOption"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value"
                                                    />
                                                </el-select>
                                            </div>
                                        </div>
                                        <div class="setting-item-content__item">
                                            <div class="label">
                                                最少填写
                                                <el-popover
                                                    placement="top"
                                                    trigger="hover"
                                                    content="-1为不限制"
                                                >
                                                    <i
                                                        class="iconfont el-icon-hand-ziyuan"
                                                        slot="reference"
                                                        style="color: #C2C2C2"
                                                    />
                                                </el-popover>
                                            </div>
                                            <div class="value">
                                                <el-input-number
                                                    v-model="activeData.value_length_min"
                                                    size="small"
                                                    :step="1"
                                                    step-strictly
                                                    :controls="true"
                                                    controls-position="right"
                                                    :min="-1"
                                                    style="width: 104px;"
                                                />
                                                <span style="margin-left: 4px">字</span>
                                            </div>
                                        </div>
                                        <div class="setting-item-content__item">
                                            <div class="label">
                                                最多填写
                                                <el-popover
                                                    placement="top"
                                                    trigger="hover"
                                                    content="-1为不限制"
                                                >
                                                    <i
                                                        class="iconfont el-icon-hand-ziyuan"
                                                        slot="reference"
                                                        style="color: #C2C2C2"
                                                    />
                                                </el-popover>
                                            </div>
                                            <div class="value">
                                                <el-input-number
                                                    v-model="activeData.value_length_max"
                                                    size="small"
                                                    :step="1"
                                                    step-strictly
                                                    :controls="true"
                                                    controls-position="right"
                                                    :min="-1"
                                                    style="width: 104px;"
                                                />
                                                <span style="margin-left: 4px">字</span>
                                            </div>
                                        </div>
                                        <div class="setting-item-content__item">
                                            <div class="label">默认文案</div>
                                            <div class="value">
                                                <el-input
                                                    v-model="activeData.hint"
                                                    size="small"
                                                    style="width: 184px;"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                            <!--图片上传额外配置-->
                            <template v-if="activeData.type === 5">
                                <div class="setting-item">
                                    <div class="setting-label">最大上传图片数</div>
                                    <div class="setting-content">
                                        <el-select
                                            v-model="activeData.value_length_max"
                                            size="small"
                                            style="width: 96px"
                                        >
                                            <el-option
                                                label="不限"
                                                :value="-1"
                                            />
                                            <el-option
                                                v-for="(item, index) in 10"
                                                :key="index"
                                                :label="item"
                                                :value="item"
                                            />
                                        </el-select>
                                    </div>
                                </div>
                            </template>
                            <!--图片选择额外配置-->
                            <template v-if="activeData.type === 10">
                                <div class="setting-item column">
                                    <div class="setting-item-title">可选范围</div>
                                    <div class="setting-item-content">
                                        <div class="setting-item-content__item">
                                            <div class="label">最少</div>
                                            <div class="value">
                                                <el-select
                                                    v-model="activeData.value_length_min"
                                                    size="small"
                                                >
                                                    <el-option
                                                        label="不限"
                                                        :value="-1"
                                                    />
                                                    <el-option
                                                        v-for="(item, index) in activeData.options"
                                                        :key="index"
                                                        :label="`${index + 1}项`"
                                                        :value="index + 1"
                                                    />
                                                </el-select>
                                            </div>
                                        </div>
                                        <div class="setting-item-content__item">
                                            <div class="label">最多</div>
                                            <div class="value">
                                                <el-select
                                                    v-model="activeData.value_length_max"
                                                    size="small"
                                                >
                                                    <el-option
                                                        label="不限"
                                                        :value="-1"
                                                    />
                                                    <el-option
                                                        v-for="(item, index) in activeData.options"
                                                        :key="index"
                                                        :label="`${index + 1}项`"
                                                        :value="index + 1"
                                                    />
                                                </el-select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                            <!--分页器额外配置-->
                            <template v-if="activeData.type === 12">
                                <div class="setting-item">
                                    <div class="setting-label">最短时间</div>
                                    <div class="setting-content">
                                        <el-switch
                                            v-model="activeData.pagination_stay_time_type"
                                            :active-value="1"
                                            :inactive-value="0"
                                            @change="setStayTime($event, activeData)"
                                        />
                                    </div>
                                </div>
                                <div
                                    class="setting-item"
                                    style="background: #F8F9FA"
                                    v-if="activeData.pagination_stay_time_type"
                                >
                                    <div class="setting-label">本页停留最短时间</div>
                                    <div class="setting-content">
                                        <el-input-number
                                            v-model="activeData.pagination_stay_time"
                                            size="small"
                                            :step="1"
                                            step-strictly
                                            :controls="false"
                                            controls-position="right"
                                            :min="-1"
                                            style="width: 104px;"
                                        />
                                        <span style="margin-left: 2px">秒</span>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </template>
                    <!--选项设置区域-->
                    <template v-if="configType === 'option' && activeOptionData">
                        <!--单选或多选选项设置区域-->
                        <template v-if="activeData.type === 2 || activeData.type === 3">
                            <div class="title-view">
                                <div class="title">{{ activeOptionData.option_type === 1 ? '选项设置' : '选项「其他」设置' }}</div>
                                <div class="sub-title">Q{{ calcIndex(activeIndex) }}{{ activeData.type | typeNameFilter }}</div>
                            </div>
                            <div class="setting-list">
                                <div class="setting-item">
                                    <div class="setting-label">选项说明</div>
                                    <div class="setting-content">
                                        <el-switch
                                            v-model="activeOptionData.has_intro"
                                            :active-value="1"
                                            :inactive-value="0"
                                            @change="setEmptyDesc($event, activeOptionData)"
                                        />
                                    </div>
                                </div>
                                <template v-if="activeOptionData.option_type === 2">
                                    <div class="setting-item">
                                        <div class="setting-label">内容限制</div>
                                        <div class="setting-content">
                                            <el-select
                                                v-model="activeOptionData.edit_content_validation_rule"
                                                size="small"
                                                style="width: 96px"
                                                @change="setEmptyValidate($event, activeOptionData, 'edit_content_validation_type')"
                                            >
                                                <el-option
                                                    v-for="item in validateOption"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value"
                                                />
                                            </el-select>
                                        </div>
                                    </div>
                                    <div class="setting-item">
                                        <div class="setting-label">
                                            字数限制
                                            <el-input-number
                                                v-model="activeOptionData.edit_content_length_max"
                                                size="mini"
                                                :step="1"
                                                step-strictly
                                                :controls="false"
                                                :min="-1"
                                                style="width: 58px; margin-left: 10px"
                                                v-if="activeOptionData.length_type"
                                            />
                                        </div>
                                        <div class="setting-content">
                                            <el-switch
                                                v-model="activeOptionData.length_type"
                                                :active-value="1"
                                                :inactive-value="0"
                                                @change="setEmptyLength($event, activeOptionData, 'edit_content_length_max')"
                                            />
                                        </div>
                                    </div>
                                    <div class="setting-item">
                                        <div class="setting-label">该空可不填</div>
                                        <div class="setting-content">
                                            <el-switch
                                                v-model="activeOptionData.edit_content_require"
                                                :active-value="0"
                                                :inactive-value="1"
                                            />
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </template>
                        <!--多项填空选项设置区域-->
                        <template v-if="activeData.type === 11">
                            <div class="title-view">
                                <div class="title">填空项设置</div>
                                <div class="sub-title">Q{{ calcIndex(activeIndex) }}{{ activeData.type | typeNameFilter }}</div>
                            </div>
                            <div class="setting-list">
                                <div class="setting-item column">
                                    <div class="setting-item-title">填写限制</div>
                                    <div class="setting-item-content">
                                        <div class="setting-item-content__item">
                                            <div class="label">格式限制</div>
                                            <div class="value">
                                                <el-select
                                                    v-model="activeOptionData.edit_content_validation_rule"
                                                    size="small"
                                                    style="width: 128px"
                                                    @change="setEmptyValidate($event, activeOptionData, 'edit_content_validation_type')"
                                                >
                                                    <el-option
                                                        v-for="item in validateOption"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value"
                                                    />
                                                </el-select>
                                            </div>
                                        </div>
                                        <div class="setting-item-content__item">
                                            <div class="label">
                                                最少填写
                                                <el-popover
                                                    placement="top"
                                                    trigger="hover"
                                                    content="-1为不限制"
                                                >
                                                    <i
                                                        class="iconfont el-icon-hand-ziyuan"
                                                        slot="reference"
                                                        style="color: #C2C2C2"
                                                    />
                                                </el-popover>
                                            </div>
                                            <div class="value">
                                                <el-input-number
                                                    v-model="activeOptionData.edit_content_length_min"
                                                    size="small"
                                                    :step="1"
                                                    step-strictly
                                                    :controls="true"
                                                    controls-position="right"
                                                    :min="-1"
                                                    style="width: 104px;"
                                                />
                                                <span style="margin-left: 4px">字</span>
                                            </div>
                                        </div>
                                        <div class="setting-item-content__item">
                                            <div class="label">
                                                最多填写
                                                <el-popover
                                                    placement="top"
                                                    trigger="hover"
                                                    content="-1为不限制"
                                                >
                                                    <i
                                                        class="iconfont el-icon-hand-ziyuan"
                                                        slot="reference"
                                                        style="color: #C2C2C2"
                                                    />
                                                </el-popover>
                                            </div>
                                            <div class="value">
                                                <el-input-number
                                                    v-model="activeOptionData.edit_content_length_max"
                                                    size="small"
                                                    :step="1"
                                                    step-strictly
                                                    :controls="true"
                                                    controls-position="right"
                                                    :min="-1"
                                                    style="width: 104px;"
                                                />
                                                <span style="margin-left: 4px">字</span>
                                            </div>
                                        </div>
                                        <div class="setting-item-content__item">
                                            <div class="label">默认文案</div>
                                            <div class="value">
                                                <el-input
                                                    v-model="activeOptionData.edit_content_hint"
                                                    size="small"
                                                    style="width: 184px;"
                                                />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </template>
                </div>
            </transition>
        </div>
    </section>
</template>

<script>
import typeList from './question.types';
import {deepClone, uuid} from "@/assets/js/utils";
import Draggable from "vuedraggable";
import ZdDivEdit from "@/components/common/editableDiv";

const pageModel = {
    title: '',
    has_intro: 0,
    intro: '',
    type: 12,
    required: 1,
    disabled: 0,
    length_type: 0,
    value_length_min: -1,
    value_length_max: -1,
    hint: '',
    pagination_stay_time_type: 0,
    pagination_stay_time: -1,
    value_validation_type: 0,
    value_validation_rule: '',
    classes: {
        overflow_fold: 0
    },
    name: '',
    default: {},
    options: []
};

export default {
    name: "QuestionnaireEdit",
    components: {ZdDivEdit, Draggable},
    props: {
        value: {
            type: Array,
            default: () => {
                return [];
            }
        },
        title: {
            type: String,
            default: ''
        }
    },
    model: {
        prop: 'value',
        event: 'change'
    },
    computed: {
        submit_config: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit('change', val);
            }
        }
    },
    data() {
        return {
            // 题型列表
            typeList,
            // 拖拽配置项
            dragOptions: {
                animation: 200,
                group: "description",
                disabled: false,
                ghostClass: "ghost",
            },
            drag: false,
            activeIndex: '',
            activeData: null,
            activeOptionIndex: '',
            activeOptionData: null,
            configType: '',
            validateOption: [
                {label: '不限', value: ''},
                {label: '数字', value: 'number'},
                {label: '字母', value: 'alphabet'},
                {label: '中文', value: 'text'},
                {label: '手机号', value: 'phone'},
                {label: 'email', value: 'email'},
            ]
        };
    },

    filters: {
        typeNameFilter(val) {
            switch (val) {
                case 2:
                    return '单选题';
                case 3:
                    return '多选题';
                case 1:
                    return '单项填空';
                case 11:
                    return '多项填空';
                case 5:
                    return '上传图片';
                case 10:
                    return '多图选择';
                case 13:
                    return '单图选择';
                case 12:
                    return '页码设置';
                default:
                    return '';
            }
        },
        typeTitleFilter(val) {
            switch (val) {
                case 2:
                    return '请输入单选题标题';
                case 3:
                    return '请输入多选题标题';
                case 1:
                    return '请输入单项填空标题';
                case 11:
                    return '请输入多项填空标题';
                case 5:
                    return '请输入上传图片标题';
                case 10:
                    return '请输入选择多张图片标题';
                case 13:
                    return '请输入选择单张图片标题';
                default:
                    return '';
            }
        }
    },
    mounted() {},
    methods: {
        /**
         * 添加题型控件
         * @param item
         */
        addQuestionItem(item) {
            if (item.id === 31) {
                this.$zdConfirm('一题一栏将会清除页面中所有分页栏重新生成，是否继续？', '温馨提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log('一题一栏处理');
                    if(this.submit_config.length > 1) {
                        this.submit_config = this.submit_config.filter(item => {
                            return item.type !== 12;
                        });
                        let arr = [];

                        this.submit_config.forEach(item => {
                            if(item.type !== 12) {
                                arr.push({
                                    ...deepClone(pageModel),
                                    id: uuid(),
                                    isActive: false,
                                    isHover: false
                                });
                                arr.push(item);
                            }
                        });
                        console.log(arr);
                        this.submit_config = arr;
                    }
                }).catch(() => {});
                return;
            }
            // 如果没有分页 默认添加一个
            if(!this.submit_config.length && item.id !== 30) {
                this.submit_config.push({
                    ...deepClone(pageModel),
                    id: uuid(),
                    isActive: false,
                    isHover: false
                });
            }
            let value = deepClone(item.value);

            value.options.forEach(item => {
                item.isActive = false;
                item.isHover = false;
            });

            let insertData = {
                ...value,
                id: uuid(),
                isActive: false,
                isHover: false
            };

            // 如果选中的 在选中下方插入
            if(this.activeIndex === '') {
                this.submit_config.push(insertData);
            } else {
                this.submit_config.splice(this.activeIndex + 1, 0, insertData);
            }
        },

        /**
         * 复制
         * @param item
         */
        handleCopy(item) {
            let copyData = deepClone(item);

            // 复制去除name 和options的value
            copyData.name = '';
            copyData.options.forEach(option => {
                option.value = '';
            });
            let insertData = {
                ...copyData,
                id: uuid(),
                isActive: false,
                isHover: false
            };

            // 如果选中的 在选中下方插入
            if(this.activeIndex === '') {
                this.submit_config.push(insertData);
            } else {
                this.submit_config.splice(this.activeIndex + 1, 0, insertData);
            }
        },

        /**
         * 点击每个题型
         * @param item
         * @param index
         */
        handleClickQuestion(item, index) {
            this.submit_config.forEach(item => {
                item.isActive = false;
            });
            item.isActive = true;
            this.activeIndex = index;
            this.activeData = item;
            this.activeOptionIndex = '';
            this.activeOptionData = null;
            this.submit_config.forEach(j => {
                j.options.forEach(k => {
                    k.isActive = false;
                });
            });
            this.configType = 'question';
        },

        /**
         * 点击每个选项
         * @param item
         * @param option
         * @param index
         * @param optionIndex
         * @param config_type
         */
        handleClickOption(item, option, index, optionIndex, config_type) {
            this.submit_config.forEach(j => {
                j.options.forEach(k => {
                    k.isActive = false;
                });
            });
            this.submit_config.forEach(item => {
                item.isActive = false;
            });
            item.isActive = true;
            option.isActive = true;
            this.activeIndex = index;
            this.activeData = item;
            this.activeOptionIndex = optionIndex;
            this.activeOptionData = option;
            this.configType = config_type;
        },

        /**
         * 删除控件项
         * @param item
         * @param index
         */
        handleDelete(item, index) {
            if(item.isActive) {
                this.activeIndex = '';
                this.activeData = null;
            }
            this.submit_config.splice(index, 1);
        },

        /**
         * 删除控件项选项
         * @param item
         * @param option
         * @param index
         */
        handleDeleteOption(item, option, index) {
            if(option.isActive) {
                this.activeOptionIndex = '';
                this.activeOptionData = null;
            }
            item.options.splice(index, 1);
        },

        /**
         * 添加选项
         * @param item
         * @param option_type
         */
        addOption(item, option_type) {
            item.options.push({
                option_type,
                title: `${option_type === 1 ? `选项${item.options.length - item.options.filter(i => i.option_type === 2).length + 1}` : '其他' }`,
                isActive: false,
                isHover: false,
                has_intro: 0,
                intro: '',
                image_url: '',
                length_type: 0,
                edit_content_hint: '',
                edit_content_length_min: -1,
                edit_content_length_max: -1,
                edit_content_validation_type: 0,
                edit_content_validation_rule: '',
                edit_content_require: 1
            });
        },

        /**
         * 添加单个填空项目
         * @param item
         * @param option_type
         */
        addSimpleInput(item, option_type) {
            item.options.push({
                option_type,
                title: `填空${item.options.length + 1}`,
                isActive: false,
                isHover: false,
                has_intro: 0,
                intro: '',
                image_url: '',
                length_type: 0,
                edit_content_hint: '',
                edit_content_length_min: -1,
                edit_content_length_max: -1,
                edit_content_validation_type: 0,
                edit_content_validation_rule: '',
                edit_content_require: 1
            });
        },

        /**
         * 计算除去分页器的index
         * @param index
         */
        calcIndex(index) {
            let arr = this.submit_config.slice(0, index);

            return index + 1 - arr.filter(i => i.type === 12).length;
        },

        /**
         * 计算分页index
         * @param index
         */
        calcPageIndex(index) {
            let arr = this.submit_config.slice(0, index);

            return index + 1 - arr.filter(i => i.type !== 12).length;
        },

        /**
         * 关闭说明
         * @param event
         * @param data
         */
        setEmptyDesc(event, data) {
            if (!event) {
                data.intro = '';
            }
        },

        /**
         * 设置分页最短时间
         * @param event
         * @param data
         */
        setStayTime(event, data) {
            if (!event) {
                data.pagination_stay_time = -1;
            } else {
                data.pagination_stay_time = 1;
            }
        },

        /**
         * 关闭类型校验
         * @param event
         * @param data
         * @param key
         */
        setEmptyValidate(event, data, key) {
            if (!event) {
                data[key] = 0;
            } else {
                data[key] = 1;
            }
        },

        /**
         * 关闭长度校验
         * @param event
         * @param data
         * @param key
         */
        setEmptyLength(event, data, key) {
            if (!event) {
                data[key] = -1;
            }
        },

        /**
         * 设置图片选择数量
         * @param event
         * @param data
         */
        setImageOptionLength(event, data) {
            if(event === 0) {
                data.value_length_min = 1;
                data.value_length_max = 1;
            }
        },

        /**
         * 上传图片之前 图片大小限制
         * @param file
         * @returns {boolean}
         */
        beforeUploadImage(file) {
            let type = ['image/jpeg', 'image/png', 'image/jpg'],
                isType = type.includes(file.type),
                isLt = file.size / 1024 < 500;

            if (!isType) {
                this.$notify({
                    title: '提示',
                    message: '格式仅支持jpg、jpeg、png',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            // if (!isLt) {
            //     this.$notify({
            //         title: '提示',
            //         message: `图片大小不能超过500kb`,
            //         type: 'warning',
            //         duration: 2000
            //     });
            //     return false;
            // }

            return isType;
        },

        /**
         * 上传图片
         * @param e
         * @param item
         * @param type
         * @param optionIndex
         * @returns {boolean}
         */
        handleUploadImage(e, item, type, optionIndex) {
            this.uploadImage(e, (resp) => {
                if(item.options.length >= 10) {
                    this.$message.warning(`最多可上传10张`);
                    return false;
                }
                if(type === 'edit') {
                    item.options[optionIndex].image_url = resp.data.url;
                } else {
                    item.options.push({
                        option_type: 3,
                        title: `图片${item.options.length + 1}`,
                        isActive: false,
                        isHover: false,
                        has_intro: 0,
                        intro: '',
                        image_url: resp.data.url,
                        length_type: 0,
                        edit_content_hint: '',
                        edit_content_length_min: -1,
                        edit_content_length_max: -1,
                        edit_content_validation_type: 0,
                        edit_content_validation_rule: '',
                        edit_content_require: 1
                    });
                }
            }, (resp) => {
                console.log(resp.msg);
            });
        },

        /**
         * 上传图片
         * @param e
         * @param success
         * @param error
         */
        uploadImage(e, success, error) {
            let pic = new FormData();

            pic.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: pic,
                success: resp => {
                    if (resp.code === 1) {
                        success(resp);
                    } else {
                        this.$message({
                            type: 'warning',
                            message: '上传图片失败',
                            center: true
                        });
                        error(resp);
                    }
                }
            });
        },

        /**
         * 设置图片描述
         * @param option
         */
        async setOptionDesc(option) {
            let result = await this.$zdPrompt({
                title: '图片选项说明',
                message: '图片选项说明',
                placeholder: '请输入图片选项说明…',
                defaultValue: option.intro,
                maxlength: ''
            });

            if(result) {
                option.intro = result;
            }
        },

        /**
         * 删除图片选项
         * @param item
         * @param optionIndex
         * @param index
         */
        handleDeleteImageOption(item, optionIndex, index) {
            item.options.splice(optionIndex, 1);
            if(this.$refs[`uploader${index}`][0]) {
                this.$refs[`uploader${index}`][0].uploadFiles = [];
            }
        },

        /**
         * 应用全部分页时间
         * @param data
         */
        applyPageTime(data) {
            this.submit_config.forEach(item => {
                item.pagination_stay_time_type = data.pagination_stay_time_type;
                item.pagination_stay_time = data.pagination_stay_time;
            });
        },

        /**
         * 禁止拖到第一个位置
         * @param e
         * @returns {boolean}
         */
        onDragMove(e){
            return e.relatedContext.index !== 0;
        },

        /**
         * 禁止拖到图片选择器位置
         * @param e
         * @returns {boolean}
         */
        onDragImageMove(e){
            return Boolean(e.relatedContext.element);
        },
    }
};
</script>

<style scoped lang="less">
@import "./question.style.less";
</style>
